<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>元素的尺寸</title>

        <style type="text/css">
            /* 通过为 body 设置 内外边距来解决 页面四周有空白的问题 */
            body { margin: 0; padding: 0;  }
        
            .wrapper {
                width: 80% ;
                height: 100px ;
                margin: 25px auto ;
                border: 2px solid blue;
            }

            /* 若 .first 是个块元素( block element ) 则其宽度默认是"占满"父元素整行 */
            .first {
                height: 50px ;
                background: rgba( 100 , 100 , 100 , 0.5 );
            }

            .second {
                height: 50px ;
                margin: 25px ;
                background: rgba( 100 , 100 , 100 , 0.5 );
            }

            .third {
                width: 100% ;
                height: 50px ;
                margin: 25px ;
                background: rgba( 100 , 100 , 100 , 0.5 );
            }

            hr { height: 10px ; border: none ; background: purple ; margin: 0 ; }

            .conatiner {
                margin: 0 ;
                background: #dedede ;
            }

            .fourth {
                width: 80% ;
                height: 100px ;
                margin: 50px auto ;
                border: 5px solid blue ;
            }
        </style>

    </head>
    <body>

        <!-- 这里使用 div 充当一个父元素，作为参照物来对比其内部的子元素 -->
        <div class="wrapper">
            <div class="first"></div>
        </div>

        <div class="wrapper">
            <div class="second"></div>
        </div>

        <div class="wrapper">
            <div class="third"></div>
        </div>

        <hr>

        <div class="conatiner">
            <div class="fourth">
                若父元素外边距为零，子元素外边距不为零，<br>
                同时父元素并未设置边框，<br>
                此时 父子元素上下外边距重叠后，父元素会在上下闪开与子元素同等大小的外边距<br>
                ( 若语言描述不足以说明问题，则 放"码"过来 )
            </div>
        </div>

        <hr>

        <style type="text/css">
            .layout-across { 
                width: 100% ; 
                background: #dedede ;
            }

            .layout-center {
                height: 50px ;
                width: 80% ;
                margin: auto ;
                background: rgba(250, 237, 62, 0.5) ;
            }
        </style>

        <div class="layout-across">
            <div class="layout-center"></div>
        </div>
        
    </body>
</html>